<template>
  <a-layout style="height:100%;">
    <a-layout-sider style="background-color: white;">
      <br>
      <table style="width:100%;" align="center">
        <tr style="height:60px;">
          <td></td>
          <td align="center">
            <a-button type="primary" shape="circle" size="large" icon="up" @click="remoteOpt('down')"></a-button>
          </td>
          <td></td>
        </tr>
        <tr style="height:60px;">
          <td align="center">
            <a-button type="primary" shape="circle" size="large" icon="left" @click="remoteOpt('right')"></a-button>
          </td>
          <td></td>
          <td align="center">
            <a-button type="primary" shape="circle" size="large" icon="right" @click="remoteOpt('left')"></a-button>
          </td>
        </tr>
        <tr style="height:60px;">
          <td></td>
          <td align="center">
            <a-button type="primary" shape="circle" size="large" icon="down" @click="remoteOpt('up')"></a-button>
          </td>
          <td></td>
        </tr>
        <tr style="height:70px;">
          <td align="center">
            <a-button type="primary"  @click="remoteOpt('zoomin')">拉近</a-button>
          </td>
          <td></td>
          <td align="center">
            <a-button type="primary"  @click="remoteOpt('zoomout')">拉远</a-button>
          </td>
        </tr>
      </table>
    </a-layout-sider>
    <a-layout-content style="overflow: hidden;">
      <!--
      <iframe src="http://zhibo.setrtmp.com/live/kr11/kr363.html" style="overflow: hidden" frameborder="0" width="100%" height="700px" scrolling="auto"></iframe>
      -->
      <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import {postAction} from '@/api/manage';
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'

  export default {
    name: 'Monitoring',
    components: {
      videoPlayer
    },
    data() {
      return {
        playerOptions: {
          height: '400',
          sources: [{
            type: 'rtmp/mp4',
            src: 'rtmp://tx1.yunchuanglive.com/live/SSSS-306752-DEEAC'
          }],
          techOrder: ['flash'],
          autoplay: true,
          controls: false,
          preload: 'auto'
        }
      }
    },
    created() {

    },
  watch:{
    $route(to,from){
      this.$destroy(videoPlayer);
    }
  },
    methods:{
      remoteOpt(type) {
        let remoteUrl = "https://www.setrtmp.com/ptz.php?mac=00614b771918&op="+type;
        console.log(remoteUrl);
        postAction(remoteUrl).then((res) => {
          console.log(res);
        });
      }
    }
  }
</script>

<style scoped>

</style>